import React,{useEffect, useState} from 'react';
import Head from 'next/head';
import Link from 'next/link';
import {withRouter} from 'next/router';
import {Row,Col, Breadcrumb, Affix} from 'antd'; // antd 提供的组件
import axios from 'axios';


// 自定义组件
import Header from '../components/Header/Header';
import Footer from '../components/Footer/Footer';
import ArticleDetail from '../components/ArticleDetail/ArticleDetail';
import ArticleNavbar from '../components/ArticleNavbar/ArticleNavbar';

// 接口管理文件
import apiUrl from "../config/apiUrl";

// markdown 文件处理
import mdToHtml from '../config/function/mdToHtml';

function Home(props) {
    
    
    const [data,setData] = useState(props.data);
    
    let {catalogue,html} = mdToHtml(data.content);
    

    useEffect(() => {
        console.log('data');
        
        
    },[])
    return (
        <>
        <Head className="header">
            <title>Hot|Pot</title>

        </Head>
            <Header />

            
            <Row className="body" type="flex" justify="center" gutter={32}>
            <Col className="body_left" xs={0} sm={0} md={7} lg={5} xl={4} xxl={3}>
                
                <Affix offsetTop={50}>
                        
                        <ArticleNavbar menu={catalogue}/>
                        
                </Affix>

            </Col>

            
            <Col className="body_right" xs={22} sm={22} md={17} lg={16} xl={14} xxl={10}>
                
                <Breadcrumb>
                    <Breadcrumb.Item><Link href="/"><a >首页</a></Link></Breadcrumb.Item>
                    
                    <Breadcrumb.Item>{data.title}</Breadcrumb.Item>
                </Breadcrumb>


                <ArticleDetail data={data} html={html}/>

            </Col>
            
            </Row>

            <Footer />
        </>
    )
}

Home.getInitialProps = async (ctx) => {

    console.log('1');
    // todo:学习 axios ，将这里改呈 axios

    const data = await axios.get(apiUrl.getArticleById(ctx.query.id)).then(res => res.data).catch(err => {
        console.log('获取文章数据出错：',err);
    });

    // data 为一篇文章的所有详细信息
    return { data:data.data[0]}
}

export default withRouter(Home);